<script setup>
import { onMounted, ref } from 'vue'
import { queryAllCourseComment,deleteCourseComment} from '@/api/course_comment'
import { ElMessage,ElMessageBox} from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true);
const total = ref(0);
const tableData = ref([])
const form = ref({username:''})

onMounted(() => {
  search()
})
const search=async ()=>{
  const restult = await queryAllCourseComment(form.value.username,currentPage.value,pageSize.value)
  console.log(restult)
  if(restult.code){
    tableData.value = restult.data.rows;
    total.value = restult.data.total
  }else{
    ElMessage.error(restult.msg)
  }
}
const handleDelete=async (id)=>{
  ElMessageBox.confirm('您确认删除该课程分类信息吗?','提示',
      { confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
  ).then(async () => {
    const result = await deleteCourseComment(id)
    if(result.code){
      ElMessage.success("删除成功")
      search()
    } else{
      ElMessage.error("删除失败")
    }
  })
}
const handleSizeChange = (val) => {
  search()
}
const handleCurrentChange = (val) => {
  search()
}
</script>

<template>
  <h3>课程评价页面</h3>
  <div class="container">
    <el-form :model="form" label-width="auto" style="max-width: 300px">
      <el-form-item label="评价用户">
        <el-input v-model="form.username" clearable @clear="clear" placeholder="请输入评价用户名" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="search">查询</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%"  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="id" property="id" width="50" />
    <el-table-column label="评论内容" property="comment" width="180"  show-overflow-tooltip />
    <el-table-column label="评论课程" property="title" width="80" />
    <el-table-column label="评价星级" property="ratting" width="160" align="center">
      <template #default="scope">
        <el-rate
            v-model="scope.row.ratting"
            disabled
            text-color="#ff9900"
        />
      </template>
    </el-table-column>
    <el-table-column label="评价时间" property="time" width="120" />
    <el-table-column  label="评价用户" property="username" width="240" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="info" size="mini" @click="handleDetails(scope.row.id)" >详情</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size" :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: flex-start;
  gap: 10px;
}
</style>